<template id="Amap">
  <div>
    <div id="amapContainer"></div>
    <div class="amapDialog" v-drag>
      <amap-dialog
        v-if="isShowDialog"
        @closeDialog="closeDialog"
        @dialogFunction="dialogFunction($event)"
        :showData="showData"
      ></amap-dialog>
    </div>
    <div
      :class="monitorData.sys_id == 29 ? 'VR' : 'monitorDialog'"
      v-if="isShowMonitor"
      v-drag
    >
      <monitor-dialog
        @closeMonitorDialog="closeMonitorDialog"
        :monitorData="monitorData"
        @checkMonitor="checkMonitor($event)"
        @errorUrl="errorUrl"
      ></monitor-dialog>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import Vue from "vue";
import { mapState, mapMutations, mapActions } from "vuex";
import mapLoader from "@/utils/loadAMap";
import mapSetting from "@/assets/utils/mapSetting";
import Bus from "@/utils/bus";
import companyNames from "@/assets/utils/companyNames";
import polygonData from "@/assets/utils/polygonData";
import polygonRoad from "@/assets/utils/polygonRoad";
import enclosure from "../../../../../../../public/modelObj/enclosure/enclosure";
// 引入无人机弹窗提示组件
import PLANETIPS from "components/tipswin/planewin";
import SockJS from "sockjs-client";
import Stomp from "webstomp-client";
import { preview, uav, uav2, update, updatebayonet } from "api/zyy";
import gcoord from "gcoord";
import {
  selectBayonetList,
  selectAllVehicle,
  selectAllVehicleNew,
  selectVehicleDetailById,
  selectVehicleDetailByCarnum,
  selectMonitorByIds,
  selectPersonDetailById,
  selectVehicleDetail,
  selectVehicleDetailNew,
  selectInspectionRoad,
  selectMonitorDetail,
} from "@/api/selectBlock";
import AmapDialog from "./components/AmapDialog.vue";
import MonitorDialog from "./components/MonitorDialog.vue";
import { getCurrentDate } from "utils/tools";
import roadPathList from "@/assets/utils/roadPath";
import roadNameList from "@/assets/utils/roadName";
import roadAsyncList from "@/utils/roadAsync";
var videoMarket = null;
var picMarket = null;
export default {
  name: "Amap",
  components: { AmapDialog, MonitorDialog },
  // 定义属性
  data() {
    return {
      map: null, //高德地图
      wms: null, //三方地图
      mapStyle: "", //地图样式
      companyLayer: "", //公司标记点
      polygon: [], //遮罩模块.
      polygonName: [], //遮罩模块名称
      polygonRoad: [], //遮盖模块管廊路径
      enclosure3Dlayer: [], //围网模型
      roadPolyline: [], //道路路径
      roadName: [], //道路名称
      bayonetList: "", //卡口列表
      bayonetPoints: [], //卡口数组
      clusterBayonet: "", //卡口聚合
      isShowDialog: false, //普通弹窗
      isShowMonitor: false, //监控视频弹窗
      vehicleList: [], //车辆列表
      vehiclePoints: [], //车辆数组
      clusterVehicle: "", //车辆聚合
      vehicleDetail: "", //车辆详情
      personVehicle: "", //人员聚合
      personList: "", //人员列表
      personPoints: [], //人员数组
      personeMarks: [],
      personDetail: "", //人员详情
      monitorList: "", //监控列表
      monitorPoints: [], //监控数组
      clusterMonitor: "", //监控聚合
      moveMarker: "", //轨迹标点
      movePolyline: "", //轨迹路径
      movePassedPolyline: "", //轨迹路过路径
      localx: 119.588717,
      localy: 34.581851,
      showData: {}, //普通弹窗父子组件传值
      monitorData: {}, //视频弹窗父子组件传值
      imageLayer: null,
      canvas: null, //canvas画布
      ctx: null, //canvas画笔
      loca: "",
      saveKakouObject: [], //保存拖拽卡口坐标
      saveJankong: [],
      roadAsyncMarker: [], //路径标记
      roadAsyncPolyline: [], //路径线
      roadAsyncPassedPolyline: [], //路过的路径线
      roadAsyncPassedPolyline2: [], //路过的路径线2
      setIntervalId: "",
      vehicleMarksList: [],
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    ...mapState({
      socketMessage: (state) => state.winconcrol.socketMessage, //这是mapState的使用方式
      planeOff: (state) => state.winconcrol.planeOff,
      planeData: (state) => state.winconcrol.planeData, //无人机数据
      editOff: (state) => state.winconcrol.editOff,
    }),
  },
  // 监控data中的数据变化
  watch: {
    socketMessage(n, o) {
      const { source, lng, lat } = n;
      // //console.log("我是n", n);
      if (source == 1) {
        // 海康 入侵报警

        this.alarmTips(n);
      } else if (source == 3) {
        this.speedAlarmTips(n);
      }
    },
    planeOff(n, o) {
      var that = this;

      if (!n) {
        this.planeData.length &&
          this.planeData.map((item, i) => {
            this.map.remove(item.markerObj);
            this.map.remove(item.objed.object3Dlayer);
            item.objed.end();
            clearInterval(window["tt" + i]);
            // item.circles1.circles.map((it) => {
            //   this.map.remove(it);
            // });
          });
      } else {
        this.planeData.length &&
          this.planeData.map((item, i) => {
            this.map.add(item.markerObj);
            this.map.add(item.objed.object3Dlayer);
            item.objed.start();
            window["tt" + i] = setInterval(() => {
              item.objed.scan();
            }, 50 + i * 5);
            // item.circles1.circles.map((it) => {
            //   this.map.add(it);
            // });
            // item.circles1.start(500, 2000);
          });
      }
    },
    editOff(n, o) {
      if (!n) {
        if (this.saveJankong.length) {
          this.saveupdate(this.saveJankong);
        }
        if (this.saveKakouObject.length) {
          this.saveupdatebayonet(this.saveKakouObject);
        }
      }
    },
  },
  // 方法集合
  methods: {
    ...mapMutations([
      "setSocketMessage",
      "setPlaneData",
      "setSocketVideoUrl",
      "setVideoShow",
      "setPicShow",
      "setPlaneWinOff",
      "setPlaneDataList",
      "setKaKouLng",
    ]),
    // 卡口 updatebayonet
    async saveupdatebayonet(n) {
      let res = await updatebayonet(n);
      if (this.$iscode(res)) {
      }
    },
    // 监控update,
    async saveupdate(n) {
      let res = await update(n);
      if (this.$iscode(res)) {
      }
    },
    errorUrl(n) {
      if (n.type == "error") {
        if (n.videourl == this.monitorData.preview_url) {
          this.monitorData.preview_url = "";
        }
      }
    },
    //地图异步加载方式
    async creatMap() {
      await mapLoader()
        .then(async (AMap) => {
          // //console.log("正在加载地图请稍后", AMap);
          if (!window.AMapUI) {
            // 如果还没有初始化
            await initAMapUI(); // 这里调用initAMapUI初始化
          }
          await this.initAmap(); //加载地图
          await this.initMapCanvas();
        })
        .catch((err) => {
          this.initWebSocket();
          this.$message({
            message: "地图加载失败," + err,
            type: "error",
            duration: 3000,
          });
          //console.log("地图加载失败,", err);
        });
    },
    initMapCanvas() {
      this.canvas = document.createElement("canvas");
      this.ctx = this.canvas.getContext("2d");
      this.canvas.width = 1774;
      this.canvas.height = 1247;
      // this.loadingRiverImage();
      // this.computedLength();
    },
    //初始化地图
    initAmap() {
      let loading = this.$loading({
        lock: true,
        text: "网络不稳定努力加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
        fontSize: "28px",
      });
      this.map = new AMap.Map("amapContainer", {
        viewMode: mapSetting.viewMode,
        resizeEnable: true,
        zooms: mapSetting.zooms,
        zoom: mapSetting.zoom,
        center: mapSetting.center,
        pitch: mapSetting.pitch,
        rotation: mapSetting.rotation,
        mapStyle: mapSetting.mapStyle,
      });
      this.map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 1);
      this.map.DirectionLight = new AMap.Lights.DirectionLight(
        [-6, -2, 14],
        [1, 1, 1],
        0.7
      );

      this.initWms();
      this.loadingMapElement();
      let that = this;
      this.map.on("complete", function() {
        that.initWebSocket();
        loading.close();
        window.map = this.map;
        that.MapCanvasLayer = new AMap.CanvasLayer({
          canvas: that.canvas,
          bounds: new AMap.Bounds(
            [119.484999, 34.481996],
            [119.700435, 34.604466]
          ),
          zooms: mapSetting.zooms,
        });

        that.MapCanvasLayer.setMap(that.map);
      });
      this.map.on("click", function(e) {
        that.localx = e.lnglat.getLng();
        that.localy = e.lnglat.getLat();
        //console.log(that.localx + "," + that.localy);
        // //console.log(that.enclosure3Dlayer, "that.enclosure3Dlayer");
        // let index = 50;
        // if (that.enclosure3Dlayer.length > 0) {
        //   that.map.remove(that.enclosure3Dlayer[index]);
        // }
        // let options = {
        //   lngLatX: that.localx,

        //   lngLatY: that.localy,

        //   scale: [120, 120, 120],

        //   mtl: `/modelObj/enclosure/bayonet.mtl`,

        //   obj: `/modelObj/enclosure/bayonet.obj`,

        //   material: "",

        //   rotateZ: 307,
        // };
        // that.createEnclosure(options, index);
      });
      this.map.on("zoomend", function(e) {
        // //console.log("当前地图级别", that.map.getZoom());
        // let bounds = that.map.getBounds();
        // //console.log(
        //   "获取当前边界northEast",
        //   bounds,
        //   "获取当前边界southWest",
        //   bounds
        // );
      });
      this.map.on("moveend", function(e) {
        // //console.log("当前地图级别", that.map.getZoom());
        // let bounds = that.map.getBounds();
        // //console.log(
        //   "获取当前边界northEast",
        //   bounds,
        //   "获取当前边界southWest",
        //   bounds
        // );
      });
      // this.map.on("dragend", function (e) {
      // //console.log("当前倾角", that.map.getPitch());
      // //console.log("当前角度", that.map.getRotation());
      // });
    },
    //初始化三方标准图层
    initWms() {
      this.wms = new AMap.TileLayer.WMS({
        url: "mpsh/geoserver/lyg/wms", // wms服务的url地址
        blend: true, // 地图级别切换时，不同级别的图片是否进行混合
        params: {
          FORMAT: "image/png",
          VERSION: "1.3.0",
          LAYERS: "lyg:lyg-xw-png5-0517-pic",
        },
      });
      this.map.add(this.wms);
    },
    createRoadAsync() {
      let that = this;
      roadAsyncList.map((item, index) => {
        let lineArr = item;
        that.roadAsyncMarker[index] = new AMap.Marker({
          map: that.map,
          position: item[0],
          icon: require("@/assets/images/indexBody/legendList/car.png"),
          offset: new AMap.Pixel(10, 10),
          autoRotation: true,
          angle: 20,
          visible: false,
        });
        // 绘制轨迹呼吸线
        that.roadAsyncPolyline[index] = new AMap.Polyline({
          map: that.map,
          path: lineArr,
          showDir: true,
          strokeColor: "#FFE4B5", //线颜色
          strokeOpacity: 1, //线透明度
          strokeWeight: 5, //线宽
          // strokeStyle: "solid"  //线样式
        });
        that.roadAsyncPassedPolyline[index] = new AMap.Polyline({
          map: that.map,
          strokeColor: "#FFFF00", //线颜色
          strokeOpacity: 0.8, //线透明度
          strokeWeight: 5, //线宽
        });
        that.roadAsyncPassedPolyline2[index] = new AMap.Polyline({
          map: that.map,
          strokeColor: "#FFE4B5", //线颜色
          strokeWeight: 5, //线宽
        });
        let temp = "";
        let time = 0;
        let direction = true;
        that.roadAsyncMarker[index].on("moving", function(e) {
          // //console.log(e, "moving");
          if (temp !== e.passedPath) {
            temp = e.passedPath;
            if (parseFloat(time) <= 1 && parseFloat(time) >= 0 && direction) {
              time = parseFloat(time) + 0.01;
              that.roadAsyncPolyline[index].setOptions({
                strokeOpacity: parseFloat(time),
              });
              // that.roadAsyncPassedPolyline2[index].setOptions({
              //   strokeOpacity: parseFloat(time),
              // });
            } else {
              time = parseFloat(time) - 0.01;
              if (parseFloat(time) <= 0.11) {
                direction = true;
              } else {
                direction = false;
              }
              that.roadAsyncPolyline[index].setOptions({
                strokeOpacity: parseFloat(time),
              });
              // that.roadAsyncPassedPolyline2[index].setOptions({
              //   strokeOpacity: parseFloat(time),
              // });
            }
          }
          that.roadAsyncPassedPolyline[index].setPath(e.passedPath);
          setTimeout(() => {
            that.roadAsyncPassedPolyline2[index].setPath(e.passedPath);
          }, 10);
        });
        // this.map.setFitView();

        that.roadAsyncMarker[index].moveAlong(lineArr, 2000, this.a(), true);
      });
    },
    closeRoadAsync() {
      if (this.roadAsyncMarker.length > 0) {
        roadAsyncList.map((item, index) => {
          this.map.remove(this.roadAsyncMarker[index]);
          this.map.remove(this.roadAsyncPolyline[index]);
          this.map.remove(this.roadAsyncPassedPolyline[index]);
          this.map.remove(this.roadAsyncPassedPolyline2[index]);
        });
      }
    },
    a() {},
    //加载地图元素
    loadingMapElement() {
      // this.createRoadAsync();
      //加载公司标注
      this.createCompany();
      // 无人机
      // 石化九路与苏海路交叉口管廊
      this.getDrawCricle(
        [119.5562, 34.533759],
        0,
        "石化九路与苏海路交叉口管廊"
      ).then((res) => {
        this.setPlaneData(res);
        // this.map.add(res.markerObj);
      });
      // 重型化工消防站楼顶 ,
      this.getDrawCricle([119.607767, 34.538506], 1, "重型化工消防站楼顶").then(
        (res) => {
          this.setPlaneData(res);
          // this.map.add(res.markerObj);
        }
      );
      // this.getDrawCricle([119.608294, 34.542942]);
    },
    // 石化九路与素海璐交叉口管廊上
    async getUav(name) {
      let res = await uav();
      if (this.$iscode(res)) {
        const { data = {} } = res;
        data.planeName = name;
        this.setPlaneDataList(JSON.stringify(data));
      }
    },
    // 重型化工消防站楼顶
    async getUav2(name) {
      let res = await uav2();
      if (this.$iscode(res)) {
        const { data = {} } = res;
        data.planeName = name;
        this.setPlaneDataList(JSON.stringify(data));
      }
    },
    //重置地图
    resetMap() {
      this.map.setCenter(mapSetting.center);
      this.map.setZoom(mapSetting.zoom);
      this.map.setPitch(mapSetting.pitch);
      this.map.setRotation(mapSetting.rotation);
    },
    //创建公司标记点
    createCompany() {
      let markers = [];
      let allowCollision = false; // 设置 allowCollision：true，可以让标注避让用户的标注
      this.companyLayer = new AMap.LabelsLayer({
        zooms: [1, 18], //zooms越大可视范围越小
        zIndex: 1000,
        allowCollision: true,
        collision: true,
      });
      // 初始化 labelMarker
      for (let i = 0; i < companyNames.LabelsData.length; i++) {
        let curData = companyNames.LabelsData[i];
        curData.extData = {
          index: i,
        };
        let labelMarker = new AMap.LabelMarker(curData);
        markers.push(labelMarker);
      }
      // 将 marker 添加到图层
      this.companyLayer.add(markers);
      // 图层添加到地图
      this.map.add(this.companyLayer);
    },
    //移除公司标记点
    removeCompany() {
      this.map.remove(this.companyLayer);
    },
    //创建围栏模型
    createEnclosure(options, index) {
      let modelName = "enclosure";
      let that = this;
      let objLoader = new THREE.OBJLoader2();
      let callbackOnLoad = function(event) {
        that.enclosure3Dlayer[index] = new AMap.Object3DLayer();
        let meshes = event.detail.loaderRootNode.children;
        for (let i = 0; i < meshes.length; i++) {
          let vecticesF3 = meshes[i].geometry.attributes.position;
          let vecticesNormal3 = meshes[i].geometry.attributes.normal;
          let vecticesUV2 = meshes[i].geometry.attributes.uv;
          let vectexCount = vecticesF3.count;
          let mesh = new AMap.Object3D.MeshAcceptLights();
          let geometry = mesh.geometry;
          //底部一圈
          // debugger
          let c, opacity;
          let material = meshes[i].material[0] || meshes[i].material;
          // debugger
          if (options.material) mesh.textures.push(options.material);

          c = material.color;

          opacity = material.opacity;
          // debugger
          for (let j = 0; j < vectexCount; j += 1) {
            let s = j * 3;
            geometry.vertices.push(
              vecticesF3.array[s],
              vecticesF3.array[s + 2],
              -vecticesF3.array[s + 1]
            );
            if (vecticesNormal3) {
              geometry.vertexNormals.push(
                vecticesNormal3.array[s],
                vecticesNormal3.array[s + 2],
                -vecticesNormal3.array[s + 1]
              );
            }
            if (vecticesUV2) {
              geometry.vertexUVs.push(
                vecticesUV2.array[j * 2],
                1 - vecticesUV2.array[j * 2 + 1]
              );
            }
            geometry.vertexColors.push(c.r, c.g, c.b, opacity);
          }
          // debugger
          mesh.DEPTH_TEST = material.depthTest;
          // mesh.backOrFront = 'both'
          mesh.transparent = opacity < 1;
          mesh.scale(options.scale[0], options.scale[1], options.scale[2]);
          mesh.rotateZ(options.rotateZ);
          mesh.position(new AMap.LngLat(options.lngLatX, options.lngLatY));
          that.enclosure3Dlayer[index].add(mesh);
        }
        that.map.add(that.enclosure3Dlayer[index]);
      };

      let onLoadMtl = function(materials) {
        objLoader.setModelName(modelName);
        objLoader.setMaterials(materials);
        objLoader.load(options.obj, callbackOnLoad, null, null, null, false);
      };
      objLoader.loadMtl(options.mtl, null, onLoadMtl);
    },
    //移除围栏模型
    removeEnclosure() {
      if (this.enclosure3Dlayer.length > 0) {
        this.enclosure3Dlayer.map((item, index) => {
          this.map.remove(this.enclosure3Dlayer[index]);
        });
      }
    },
    //航拍
    getDrawCricle(center, num, name) {
      var that = this;
      return new Promise(function(resolve) {
        var typeImg = require("assets/images/icon/plane.png");

        var mapContent = `<div class="mapMarker">

                                <div class="mapIcon">

                                  <img src="${typeImg}" alt="">

                                </div>

                              </div>`;

        var markerObj = new AMap.Marker({
          // map: that.map,

          content: mapContent,

          position: center,

          offset: new AMap.Pixel(0, 0),

          title: "",

          animation: "AMAP_ANIMATION_DROP", //点标掉落效果   “AMAP_ANIMATION_BOUNCE”，点标弹跳效果

          label: {
            content: "", //设置文本标注内容

            direction: "top", //设置文本标注方位

            offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
          },

          zIndex: 9999999,
          offset: new AMap.Pixel(-30, -20),
        });

        var zoom = 5;
        //半径、层数、中心点、{填充颜色、初始透明度}

        var circles1_point_lng = center[0] + 0.015;
        var circles1_point_lat = center[1] + 0.014;

        // var objed = that.$CircleShow(that.map, center);
        // var circles1 = new objed(zoom * 300, 2, {
        //   fillColor: "rgb(143, 56, 227)",
        //   fillOpacity: 0.4,
        // });
        var objed = that.$CircleLei(that.map, center, 2000);
        // circles1.start(800, 5000); //水波圆开始

        markerObj.on("click", (e) => {
          that.setPlaneWinOff(true);
          if (num == 0) {
            that.getUav(name);
          } else {
            that.getUav2(name);
          }
          // let planeinfoWindow = new AMap.InfoWindow({
          //   isCustom: true, //使用自定义窗体
          //   autoMove: false, //	是否自动调整窗体到视野内
          //   content: `<div class="alertBox" id="mapalert" style="width:20vw"> </div>`,
          //   offset: new AMap.Pixel(0, -50),
          //   anchor: "bottom-center", //信息窗体锚点
          //   retainWhenClose: true, //信息窗体关闭时，是否将其Dom元素从页面中移除，默认为false
          // });
          // //创建vue组件模板
          // let MyComponent = Vue.extend(PLANETIPS);
          // let component = new MyComponent({
          //   //  这里传入的对象会替换掉模板里面相同的内容（props ,  msg ）
          //   props: {
          //     map: {
          //       type: Object,
          //       default: function () {
          //         return that.map;
          //       },
          //     },
          //     planeinfoWindow: {
          //       type: Object,
          //       default: function () {
          //         return planeinfoWindow;
          //       },
          //     },
          //   },
          // }).$mount().$el;
          // planeinfoWindow.open(that.map, markerObj.getPosition());
          // if (planeinfoWindow.getIsOpen()) {
          //   //如果信息窗体已打开
          //   setTimeout(() => {
          //     //加延迟，防止元素获取不到
          //     document.getElementById("mapalert").appendChild(component);
          //   }, 500);
          // }
        });

        resolve({
          // circles1,
          objed,
          markerObj,
          num,
        });
      });
    },
    // 获取视频地址
    async getPreview(n, marker) {
      var formData = new FormData();
      const { device_code } = n;
      formData.append("indexCode", device_code);
      let res = await preview(formData);
      if (this.$iscode(res)) {
        const {
          data: { url = "" },
        } = res;
        if (url) {
          // var url1 = "http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8";

          this.setSocketVideoUrl(url);
          this.setVideoShow(true);
          // this.map.remove(marker);
        }
      }
    },
    // 超速警告数据
    setChaoSpeed(n, marker) {
      if (n.id == undefined) return;
      // this.setSocketVideoUrl("");
      this.setPicShow(true);
      // this.map.remove(marker);
    },

    // 入侵警告
    alarmTips(item) {
      if (videoMarket) {
        this.map.remove(videoMarket);
      }
      var _this = this;
      // var haikang =  "haikang"+num;

      // let audio = new Audio();
      // audio.src = require("assets/mp3/alert.mp3");
      // audio.play();
      /*
         <div style="position:relative;width:14vw;">
            <p class="ptips">${item.alarm_name}</p>
           </div>
          <div class="point alarm"></div>
       */
      var mapContent =
        " <div style='width: 48px;height: 48px;'  > " +
        "<img style='width:100%;height:100%;' src=" +
        require("assets/images/zyy/peopse.png") +
        "></img>" +
        "</div>";

      videoMarket = new AMap.Marker({
        animation: "AMAP_ANIMATION_DROP", //点标掉落效果   “AMAP_ANIMATION_BOUNCE”，点标弹跳效果
        position: new AMap.LngLat(item.lng, item.lat),
        content: mapContent,
        offset: new AMap.Pixel(-13, -30),
      });

      videoMarket.setMap(_this.map);
      setTimeout(() => {
        _this.getPreview(item, videoMarket);
      }, 50);
      videoMarket.on("click", (e) => {
        setTimeout(() => {
          _this.getPreview(item, videoMarket);
        }, 50);
      });
    },
    // 超速警告
    speedAlarmTips(item) {
      if (picMarket) {
        this.map.remove(picMarket);
      }
      var _this = this;
      // var haikang =  "haikang"+num;

      // let audio = new Audio();
      // audio.src = require("assets/mp3/alert.mp3");
      // audio.play();

      var mapContent = `<div style="position:relative;width:14vw;"><p class="ptips">${item.alarm_name}</p> </div><div class="point speed"></div>`;

      picMarket = new AMap.Marker({
        animation: "AMAP_ANIMATION_DROP", //点标掉落效果   “AMAP_ANIMATION_BOUNCE”，点标弹跳效果
        position: new AMap.LngLat(item.lng, item.lat),
        content: mapContent,
        offset: new AMap.Pixel(-13, -30),
      });

      picMarket.setMap(_this.map);
      setTimeout(() => {
        _this.setChaoSpeed(item, picMarket);
      }, 50);
      picMarket.on("click", (e) => {
        setTimeout(() => {
          _this.setChaoSpeed(item, picMarket);
        }, 50);
      });
    },
    // 实时stmop
    initWebSocket() {
      var that = this;
      if (that.stompClient == null || !that.stompClient.connected) {
        // const socket = new SockJS(that.$globalWebsocketUrl);

        var socket = new SockJS(that.$globalWebsocketUrl, null, {
          timeout: 5000,
        }); //连接SockJS的endpoint名称为"endpointOyzc"
        this.stompClient = Stomp.over(socket); //使用STMOP子协议的WebSocket客户端
        // this.stompClient.heartbeat.outgoing = 20000; //若使用STOMP 1.1 版本，默认开启了心跳检测机制（默认值都是10000ms）
        // this.stompClient.heartbeat.incoming = 0; //客户端不从服务端接收心跳包
        console.log("正在连接中,请稍后...");
        this.stompClient.connect(
          {},
          function(frame) {
            //连接WebSocket服务端
            console.log("连接成功~~");
            // if (this.socketTimes) {
            //   clearInterval(this.socketTimes);
            // }
            //console.log("Connected:" + frame);
            //通过stompClient.subscribe订阅/topic/getResponse 目标(destination)发送的消息
            that.stompClient.subscribe("/topic/callback", function(response) {
              that.websocketonmessage(JSON.parse(response.body));
            });
          },
          this.websocketonerror
        );

        socket.onclose = function(evnt) {
          //console.log("soceet", evnt);
        };
      } else {
        //console.log("当前处于连接状态");
      }
    },
    // 接收端发送过来的信息，整个项目接收信息的唯一入口
    websocketonmessage(e) {
      this.setSocketMessage(JSON.stringify(e)); //把信息存到vuex里面，再分发到对应页面
    },
    //创建遮罩模块
    createPolygon(options, index) {
      this.polygon[index] = new AMap.Polygon({
        path: options.path,
        fillColor: options.color,
        strokeOpacity: 0,
        fillOpacity: 0.6,
        strokeColor: "#2b8cbe",
        strokeWeight: 0,
        strokeStyle: "dashed",
        strokeDasharray: [5, 5],
        id: options.id,
      });
      this.polygon[index].on("mouseover", (e) => {
        if (e.target.Ce.id == 3) {
          this.polygonRoad.map((element, number) => {
            this.polygonRoad[number].setOptions({
              strokeOpacity: 0.8,
            });
          });
        }
        this.polygon.map((element, location) => {
          if (element.Ce.id == e.target.Ce.id) {
            this.polygon[location].setOptions({
              fillOpacity: 0.8,
              fillColor: options.hoverColor,
            });
          }
        });
      });
      this.polygon[index].on("mouseout", (e) => {
        if (e.target.Ce.id == 3) {
          this.polygonRoad.map((element, number) => {
            this.polygonRoad[number].setOptions({
              strokeOpacity: 0.6,
            });
          });
        }
        this.polygon.map((element, location) => {
          if (element.Ce.id == e.target.Ce.id) {
            this.polygon[location].setOptions({
              fillOpacity: 0.6,
              fillColor: options.color,
            });
          }
        });
      });
      this.map.add(this.polygon[index]);
    },
    //创建板块名称
    createPolygonName(options, index) {
      this.polygonName[index] = new AMap.Text({
        text: options.name,
        anchor: "center", // 设置文本标记锚点
        angle: 0,
        autoRotation: false,
        style: {
          color: "#ffffff",
          "font-size": "22px",
          "background-color": "transparent",
          "border-width": 0,
        },
        position: options.position,
      });

      this.map.add(this.polygonName[index]);
    },
    //移除模块名字
    removePolygonName(index) {
      this.map.remove(this.polygonName[index]);
    },
    //移除遮罩模块
    removePolygon() {
      if (this.polygon.length > 0) {
        this.polygon.map((item, index) => {
          this.map.remove(this.polygon[index]);
        });
      }
      if (this.polygonRoad.length) {
        polygonRoad.map((item, index) => {
          this.map.remove(this.polygonRoad[index]);
        });
      }
    },
    //创建模块管廊路径
    createPolygonRoad(options, index) {
      this.polygonRoad[index] = new AMap.Polyline({
        path: options.path,
        strokeColor: "#A6B500",
        strokeWeight: 7,
        strokeStyle: "solid",
        strokeOpacity: 0.6,
        zIndex: 10,
      });
      this.map.add(this.polygonRoad[index]);
    },
    //创建道路
    createRoad(options, index) {
      this.roadPolyline[index] = new AMap.Polyline({
        path: options.path,
        strokeColor: "#0bb5c6",
        strokeOpacity: 1,
        strokeWeight: 1.5,
        strokeStyle: "solid",
        zIndex: 10,
      });

      this.map.add(this.roadPolyline[index]);
    },

    //移除道路和道路名称
    removeRoad() {
      // roadPathList.map((item, index) => {
      //   this.map.remove(this.roadPolyline[index]);
      // });
      // if (this.roadName.length > 0) {
      //   roadNameList.map((item, index) => {
      //     this.map.remove(this.roadName[index]);
      //   });
      // }
    },
    //创建道路名称
    createRoadName(options, index) {
      this.roadName[index] = new AMap.Text({
        text: options.name,
        anchor: "center", // 设置文本标记锚点
        angle: options.angle,
        autoRotation: false,
        style: {
          color: "#fff",
          "font-size": "18px",
          "background-color": " rgba(0,0,0,0)",
          "border-width": 0,
        },
        position: options.position,
        animation: "AMAP_ANIMATION_DROP",
      });

      this.map.add(this.roadName[index]);
    },
    openRoadName() {
      roadNameList.map((item, index) => {
        this.createRoadName(item, index);
      });
    },
    closeRoadName() {
      if (this.roadName.length > 0) {
        roadNameList.map((item, index) => {
          this.map.remove(this.roadName[index]);
        });
      }
    },
    //创建所有卡口图标
    async createBayonets() {
      let res = await selectBayonetList();
      let that = this;
      that.saveKakouObject = [];
      let type = "bayonet";
      if (this.$iscode(res)) {
        this.bayonetList = res.data.list;

        this.bayonetList.map((item, index) => {
          if (item.longitude && item.latitude) {
            // let localtion = gcoord.transform(
            //   [item.longitude, item.latitude],
            //   gcoord.BD09,
            //   gcoord.GCJ02
            // );
            let localtion = [item.longitude, item.latitude];
            let marker = new AMap.Marker({
              icon: new AMap.Icon({
                image: require("@/assets/images/indexBody/legendList/bayonet.png"),
                size: new AMap.Size(42, 56),
                imageSize: new AMap.Size(42, 56),
                // offset: new AMap.Pixel(-22.5, -67),
                // 设置是否可以拖拽
              }),
              position: localtion,
              draggable: that.editOff,
              cursor: "move",
              // 设置拖拽效果
              // raiseOnDrag: that.editOff,
              title: item.name,
              label: item.location,
              animation: "AMAP_ANIMATION_DROP", //点标掉落效果   “AMAP_ANIMATION_BOUNCE”，点标弹跳效果
            });
            marker.index = index;
            marker.id = item.id;
            this.bayonetPoints.push(marker);
            // that.editOff
            AMap.event.addListener(marker, "dragend", function(e) {
              //console.log(marker, e.lnglat);
              that.setZuobiao(marker, e.lnglat, that.saveKakouObject, "ka");
            });

            AMap.event.addListener(marker, "click", function() {
              that.isShowDialog = true;
              that.showData = {
                title: "卡口信息",
                detail: [{ name: item.name, text: item.location }],
                buttonText: "确定",
                functionName: "close",
              };
            });
          }
          // //console.log(item.longitude, item.latitude, "转换前的");
          // //console.log(localtion, "localtion");
        });
      }
      this.map.add(this.bayonetPoints);
      // this.setMarkerCluster(this.bayonetPoints, type);
    },
    // 修改坐标
    setZuobiao(marker, lnglat, saveObject, name) {
      var that = this;
      const { lat, lng, R, Q } = lnglat;
      // let localtion1 = gcoord.transform([R, Q], gcoord.GCJ02, gcoord.BD09);
      // if (name == "ka") {
      //   saveObject.push({
      //     id: marker.id,
      //     latitude: Q,
      //     longitude: R,
      //   });
      // } else {
      //   saveObject.push({
      //     id: marker.id,
      //     latitude: Q * 1 - 0.0017747044779738985,
      //     longitude: R * 1 + 0.004669918146007035,
      //   });
      // }
      saveObject.push({
        id: marker.id,
        latitude: Q,
        longitude: R,
      });
      var obj = {};
      saveObject = saveObject.reduce(function(item, next) {
        obj[next.id] ? "" : (obj[next.id] = true && item.push(next));
        return item;
      }, []);
      //console.log(saveObject);
    },
    //创建点聚合点标记
    setMarkerCluster(markers, type) {
      let that = this;
      let count = markers.length;
      let _renderClusterMarker = function(context) {
        var factor = Math.pow(context.count / count, 1 / 17);
        var div = document.createElement("div");
        var Hue = 180 - factor * 180;
        var bgColor = "hsla(" + Hue + ",100%,50%,0.7)";
        var fontColor = "hsla(" + Hue + ",100%,20%,1)";
        var borderColor = "hsla(" + Hue + ",100%,40%,1)";
        var shadowColor = "hsla(" + Hue + ",100%,50%,1)";
        div.style.backgroundColor = bgColor;
        var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
        div.style.width = div.style.height = size + "px";
        div.style.border = "solid 1px " + borderColor;
        div.style.borderRadius = size / 2 + "px";
        div.style.boxShadow = "0 0 1px " + shadowColor;
        div.innerHTML = context.count;
        div.style.lineHeight = size + "px";
        div.style.color = fontColor;
        div.style.fontSize = "14px";
        div.style.textAlign = "center";
        context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
        context.marker.setContent(div);
      };
      that.map.plugin(["AMap.MarkerClusterer"], function() {
        if (type == "person") {
          that.personVehicle = new AMap.MarkerClusterer(that.map, markers, {
            maxZoom: 16.9,
            gridSize: 90,
            renderClusterMarker: _renderClusterMarker,
          });
        }
        // else if (type == "bayonet") {
        //   that.clusterBayonet = new AMap.MarkerClusterer(that.map, markers, {
        //     gridSize: 60,
        //     // renderClusterMarker: _renderClusterMarker,
        //   });
        // }
        // if (type == "vehicle") {
        //   that.clusterVehicle = new AMap.MarkerClusterer(that.map, markers, {
        //     gridSize: 60,
        //     // renderClusterMarker: _renderClusterMarker,
        //   });
        // }
        // else if (type == "monitor") {
        //   that.clusterMonitor = new AMap.MarkerClusterer(that.map, markers, {
        //     gridSize: 60,
        //     // renderClusterMarker: _renderClusterMarker,
        //   });
        // }
      });
    },
    //移除所有卡口图标
    removeBayonets() {
      // this.map.remove(this.clusterBayonet);
      this.map.remove(this.bayonetPoints);
      this.bayonetPoints = [];
    },
    //创建危化品车辆定位
    async createVehicle(payload) {
      let result = "";
      let that = this;
      let loop = () => {
        result.then((res) => {
          if (res.errno == 0) {
            if (payload[0].id == 1) {
              this.vehicleList = res.data.list;
            } else if (payload[0].id == 2) {
              // res.data.list.map((item, index) => {
              //   this.$set(item.point, "lng", item.point.lon);
              //   this.$set(item.point, "carnum", item.num);
              //   this.vehicleList.push(item.point);
              // });
              this.vehicleList = res.data.list;
            }
            // //console.log(this.vehicleList, "this.vehicleList");
            this.vehicleList.map((item, index) => {
              let localtion = "";
              if (item.lng && item.lat && payload[0].id == 1) {
                localtion = gcoord.transform(
                  [item.lng, item.lat],
                  gcoord.BD09,
                  gcoord.WGS84
                );
              } else if (
                item.point.lon &&
                item.point.lat &&
                payload[0].id == 2
              ) {
                localtion = [item.point.lon, item.point.lat];
              }
              that.vehicleMarksList[index] = new AMap.Marker({
                icon: new AMap.Icon({
                  image: require("@/assets/images/indexBody/legendList/car.png"),
                  size: new AMap.Size(52, 26), //42, 56
                  imageSize: new AMap.Size(52, 26), //42, 56
                  offset: new AMap.Pixel(-26, -13), //-22.5, -67
                }),
                angle: item.direction ? item.direction : 0,
                position: localtion,
                title: item.electQuantity,
                animation: "AMAP_ANIMATION_DROP", //点标掉落效果   “AMAP_ANIMATION_BOUNCE”，点标弹跳效果
              });
              this.vehiclePoints.push(that.vehicleMarksList[index]);
              AMap.event.addListener(
                that.vehicleMarksList[index],
                "click",
                function() {
                  if (payload[0].id == 1) {
                    that.getVehicleDetail({ imei: item.imei, id: 1 });
                  } else if (payload[0].id == 2) {
                    that.getVehicleDetail({ carnum: item.num, id: 2 });
                  }
                }
              );
            });
            this.map.add(this.vehiclePoints);
          } else {
            this.$message({
              type: "error",
              message: res.errmsg,
            });
          }
        });
      };
      let updated = () => {
        result.then((res) => {
          let localtion = "";
          that.vehicleList = res.data.list;
          that.vehicleList.map((item, index) => {
            localtion = [item.point.lon, item.point.lat];
            that.vehicleMarksList[index].setPosition(localtion);
            // //console.log(
            //   that.vehicleMarksList[index].getPosition(),
            //   "that.vehicleMarksList[index]"
            // );
          });
        });
      };
      if (payload[0].id == 1) {
        result = selectAllVehicle();
        loop();
      } else if (payload[0].id == 2) {
        result = selectAllVehicleNew();
        loop();
        that.setIntervalId = setInterval(() => {
          // that.map.remove(that.vehiclePoints);
          // that.vehiclePoints = [];
          result = selectAllVehicleNew();
          updated();
          // loop();
          // //console.log(that.setIntervalId, "setInterval");
        }, 15000);
      }
      let type = "vehicle";

      // if (this.$iscode(res)) {

      // this.setMarkerCluster(this.vehiclePoints, type);
      // }
    },
    //查询危化品车辆详情
    async getVehicleDetail(options) {
      let res = "";
      if (options.id == 1) {
        res = await selectVehicleDetailById(options);
      } else {
        res = await selectVehicleDetailByCarnum(options);
      }
      if (this.$iscode(res)) {
        this.vehicleDetail = res.data;
        this.showData = {
          title: "车辆详情",
          detail: [
            {
              name: "车牌号:",
              text: this.vehicleDetail.carNum
                ? this.vehicleDetail.carNum
                : "暂无信息",
            },
            {
              name: "物品类型:",
              text: this.vehicleDetail.ladingType
                ? this.vehicleDetail.ladingType
                : "暂无信息",
            },
            {
              name: "驾驶员:",
              text: this.vehicleDetail.driverName
                ? this.vehicleDetail.driverName
                : "暂无信息",
            },
            {
              name: "联系电话:",
              text: this.vehicleDetail.driverPhone
                ? this.vehicleDetail.driverPhone
                : "暂无信息",
            },
            {
              name: "发货企业:",
              text: this.vehicleDetail.consigneeEnterpriseName
                ? this.vehicleDetail.consigneeEnterpriseName
                : "暂无信息",
            },
            {
              name: "运输公司:",
              text: this.vehicleDetail.carrierEnterpriseName
                ? this.vehicleDetail.carrierEnterpriseName
                : "暂无信息",
            },
            {
              name: "物品名称:",
              text: this.vehicleDetail.ladingName
                ? this.vehicleDetail.ladingName
                : "暂无信息",
            },
          ],
          buttonText: "轨迹",
          functionName: "drawCarRoad",
          imei: options.imei, //车辆imei
          carnum: this.vehicleDetail.carNum,
          id: options.id,
        };
        this.isShowDialog = true;
      }
    },
    //移除所有危化品车辆
    removeVehicle() {
      this.map.remove(this.vehiclePoints);
      this.vehiclePoints = [];
      if (this.setIntervalId) {
        clearInterval(this.setIntervalId);
      }
    },
    //查询人员定位
    async createPerson(payload) {
      console.time(1);
      let type = "person";
      let that = this;
      this.personList = payload[0].data;
      if (
        this.personList.length > 0 &&
        this.personList[0].longitude &&
        this.personList[0].latitude
      ) {
        let temp = gcoord.transform(
          [this.personList[0].longitude, this.personList[0].latitude],
          gcoord.BD09,
          gcoord.WGS84
        );
        if (payload[1] == "search") {
          that.map.setCenter(temp);
        }
        this.personList.map((item, index) => {
          if (item.longitude && item.latitude) {
            let localtion = gcoord.transform(
              [item.longitude, item.latitude],
              gcoord.BD09,
              gcoord.WGS84
            );
            this.personeMarks[index] = new AMap.Marker({
              icon: new AMap.Icon({
                image: require("@/assets/images/indexBody/legendList/person.png"),
                size: new AMap.Size(42, 56),
                imageSize: new AMap.Size(42, 56),
                offset: new AMap.Pixel(-22.5, -67),
              }),
              position: localtion,
              title: item.name,
              animation: "AMAP_ANIMATION_DROP", //点标掉落效果   “AMAP_ANIMATION_BOUNCE”，点标弹跳效果
            });
            this.personPoints.push(this.personeMarks[index]);
            AMap.event.addListener(
              this.personeMarks[index],
              "click",
              function() {
                that.getPersonDetail({ userid: item.id });
              }
            );
          }
        });
        // this.map.add(this.personPoints);
        this.setMarkerCluster(this.personPoints, type);
      } else {
        this.$message({
          message: "暂无人员",
          type: "warning",
        });
      }
      console.timeEnd(1);
    },
    //移除所有人员定位
    removePerson() {
      this.map.remove(this.personPoints);
      this.map.remove(this.personVehicle);
      this.personVehicle = "";
      this.personPoints = [];
    },
    // 获取人员详情
    async getPersonDetail(options) {
      let res = await selectPersonDetailById(options);
      if (this.$iscode(res)) {
        this.personDetail = res.data;
        this.showData = {
          title: "人员详情",
          detail: [
            { name: "姓名:", text: this.personDetail.name },
            { name: "电话:", text: this.personDetail.phone },
          ],
          buttonText: "确定",
          functionName: "close",
        };
        this.isShowDialog = true;
      }
    },
    //查询监控
    createMonitor(payload) {
      let that = this;
      that.saveJankong = [];
      let type = "monitor";
      this.monitorList = payload.data.list;
      if (this.monitorList.length > 0) {
        this.monitorList.map((item, index) => {
          // //console.log(item, "item");
          let monitorImage = "";
          if (item.online == 1) {
            monitorImage = require("@/assets/images/indexBody/legendList/monitor.png");
          } else if (item.online == 0) {
            monitorImage = require("@/assets/images/indexBody/legendList/monitorOff.png");
          }
          if (item.longitude2 && item.latitude2) {
            // let localtion = gcoord.transform(
            //   [item.longitude, item.latitude],
            //   gcoord.BD09,
            //   gcoord.WGS84
            // );
            let localtion = [item.longitude2, item.latitude2];
            let marker = new AMap.Marker({
              icon: new AMap.Icon({
                image: monitorImage,
                size: new AMap.Size(42, 56),
                imageSize: new AMap.Size(42, 56),
                offset: new AMap.Pixel(-22.5, -67),
              }),
              position: localtion,
              // position: [localtionX, localtionY],
              draggable: that.editOff,

              cursor: "move",
              // 设置拖拽效果
              // raiseOnDrag: that.editOff,
              title: item.name,
              animation: "AMAP_ANIMATION_DROP", //点标掉落效果   “AMAP_ANIMATION_BOUNCE”，点标弹跳效果
            });
            this.monitorPoints.push(marker);
            marker.id = item.id;
            marker.index = index;
            AMap.event.addListener(marker, "dragend", function(e) {
              //console.log(marker, e.lnglat);
              that.setZuobiao(marker, e.lnglat, that.saveJankong);
            });
            AMap.event.addListener(marker, "click", function() {
              that.monitorData = item;
              let formdata = new FormData();
              formdata.append("indexCode", item["index_code"]);
              selectMonitorDetail(formdata).then((res) => {
                if (res.errno == 0) {
                  that.monitorData.preview_url = res.data.url;
                }
              });
              that.isShowMonitor = true;
            });
          }
        });
        this.map.add(this.monitorPoints);
        // this.setMarkerCluster(this.monitorPoints, type);
      } else {
        this.$message({
          message: "监控数量为空",
          type: "warning",
        });
      }
    },
    //查看监控
    checkMonitor() {
      this.isShowMonitor = false;
    },
    //移除监控
    removeMonitor() {
      if (this.monitorPoints.length > 0) {
        this.map.remove(this.monitorPoints);
        this.monitorPoints = [];
      }
    },
    //关闭监控弹窗
    closeMonitorDialog() {
      this.isShowMonitor = false;
    },
    //关闭弹窗
    closeDialog() {
      this.isShowDialog = false;
    },
    //弹框点击出发方法
    dialogFunction(payload) {
      this.isShowDialog = false;
      if (payload.name == "drawCarRoad") {
        this.getVehicleRoad(payload.id);
      }
    },
    //查询车辆轨迹
    async getVehicleRoad(payload) {
      let day = getCurrentDate();
      let imei = this.showData.imei;
      let carnum = this.showData.carnum;
      let res = "";
      if (payload == 1) {
        res = await selectVehicleDetail({
          imei: imei,
          dates: day,
        });
      } else {
        res = await selectVehicleDetailNew({
          //  carnum: "苏A4A419",
          // dates: "2021-07-05",
          carnum: carnum,
          dates: day,
        });
      }
      let tempArry = [];
      if (this.$iscode(res)) {
        res.data.list.map((item, index) => {
          let localtion = "";
          if (payload == 1) {
            localtion = gcoord.transform(
              [item.lng, item.lat],
              gcoord.BD09,
              gcoord.WGS84
            );
          } else {
            localtion = [item.lng, item.lat];
          }
          tempArry.push(localtion);
        });
        let options = {
          name: "vehicle",
          lineArr: tempArry,
          zoom: 14,
        };
        this.createAllRoad(options);
        this.removeVehicle();
      }
    },
    //查询电子巡查轨迹
    async getInspectionRoad(options) {
      let res = await selectInspectionRoad({ id: options });
      if (this.$iscode(res)) {
        let tempArry = [];
        res.data.list.map((item, index) => {
          let localtion = gcoord.transform(
            [item.longitude, item.latitude],
            gcoord.BD09,
            gcoord.WGS84
          );
          tempArry.push(localtion);
        });
        let options = {
          name: "inspection",
          lineArr: tempArry,
          zoom: 30,
        };
        if (tempArry.length > 0) {
          this.createAllRoad(options);
        } else {
          this.$message({
            message: "警告电子巡查值为空",
            type: "warning",
          });
        }
      }
    },
    //移除电子巡查轨迹
    removeInspectionRoad() {
      this.moveMarker && this.map.remove(this.moveMarker);
      this.movePolyline && this.map.remove(this.movePolyline);
      this.movePassedPolyline && this.map.remove(this.movePassedPolyline);
    },
    //绘制轨迹
    createAllRoad(options) {
      let that = this;
      let icon = "";
      if (options.name == "inspection") {
        // icon = require("assets/images/indexBody/legendList/inspection.png");
        that.moveMarker = new AMap.Marker({
          map: that.map,
          position: options.lineArr[0],
          icon: require("assets/images/indexBody/legendList/inspection.png"),
          offset: new AMap.Pixel(-22.5, -67),
          autoRotation: false,
          angle: 0,
        });
      } else if (options.name == "vehicle") {
        // icon = require("assets/images/indexBody/legendList/car.png");
        that.moveMarker = new AMap.Marker({
          map: that.map,
          position: options.lineArr[0],
          icon: new AMap.Icon({
            image: require("@/assets/images/indexBody/legendList/car.png"),
            size: new AMap.Size(52, 26), //42, 56
            imageSize: new AMap.Size(52, 26), //42, 56
            offset: new AMap.Pixel(-26, -13), //-22.5, -67
          }),
          offset: new AMap.Pixel(-26, -13),
          autoRotation: true,
          angle: 0,
        });
      }
      // that.moveMarker = new AMap.Marker({
      //   map: that.map,
      //   position: options.lineArr[0],
      //   icon: icon,
      //   offset:
      //     options.name == "vehicle"
      //       ? new AMap.Pixel(-26, -13)
      //       : new AMap.Pixel(-22.5, -67),
      //   autoRotation: options.name == "vehicle" ? true : false,
      //   angle: 0,
      // });
      // 绘制轨迹
      that.movePolyline = new AMap.Polyline({
        map: that.map,
        path: options.lineArr,
        showDir: true,
        strokeColor: "#28F", //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6, //线宽
        // strokeStyle: "solid"  //线样式
      });
      //路过轨迹
      that.movePassedPolyline = new AMap.Polyline({
        map: that.map,
        // path: lineArr,
        strokeColor: "#AF5", //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6, //线宽
        // strokeStyle: "solid"  //线样式
      });
      that.moveMarker.on("moving", function(e) {
        that.movePassedPolyline.setPath(e.passedPath);
      });
      that.moveMarker.moveAlong(options.lineArr, 200);
      // that.map.setFitView();
      setTimeout(() => {
        that.map.setCenter(options.lineArr[0]);
        that.map.setZoom(options.zoom);
      }, 500);
    },
    //添加图片图层
    createImgLayer() {
      this.imageLayer = new AMap.ImageLayer({
        url: require("@/assets/images/indexBody/group.png"),
        bounds: new AMap.Bounds(
          [119.526843, 34.500722],
          [119.645426, 34.590056]
        ),
        zooms: [3, 17],
      });
      this.map.add(this.imageLayer);
    },
    //移除图片图层
    removeImgLayer() {
      this.map.remove(this.imageLayer);
      this.imageLayer = null;
    },
    //创建道路
    createAsyncRoad() {
      this.loca = new Loca.LineLayer({
        map: this.map,
      });
      window._loca = this.loca;

      let geo = new Loca.GeoJSONSource({
        data: {
          type: "FeatureCollection",
          features: [
            {
              type: "Feature",
              properties: {
                type: 2,
              },
              geometry: {
                type: "MultiLineString",
                coordinates: [
                  [
                    [119.562605, 34.543144],
                    [119.590178, 34.525609],
                  ],
                  [
                    [119.555953, 34.599173],
                    [119.553011, 34.596296],
                  ],
                ],
              },
            },
          ],
        },
      });

      let layer = new Loca.PulseLineLayer({
        // loca,
        zIndex: 10,
        opacity: 1,
        visible: true,
        zooms: [2, 22],
      });

      //console.log("geo", geo);
      layer.setSource(geo);
      layer.setStyle({
        //整体海拔高度
        altitude: 0,
        lineWidth: 2,
        headColor: "rgba(64, 224, 208, 0.95)",
        // 脉冲尾颜色
        trailColor: "rgba(210, 105, 30, 0.35)",
        // 脉冲长度，0.25 表示一段脉冲占整条路的 1/4
        interval: 1,
        // 脉冲线的速度，几秒钟跑完整段路
        duration: 2000,
      });
      this.loca.add(layer);
      this.loca.animate.start();
    },
  },

  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // this.initWebSocket();
    Bus.$on("changeMap", (payload) => {
      this.mapStyle = payload.name;
      if (this.mapStyle == "plan") {
        this.map.remove(this.wms);
        this.map.setMapStyle("amap://styles/5a7f3d1526acd96876aed6a616a1ca2c");
        if (!this.imageLayer) {
          this.createImgLayer();
        }
      } else if (this.mapStyle == "satellite") {
        this.map.add(this.wms);
        this.map.setMapStyle(mapSetting.mapStyle);
        if (this.imageLayer) {
          this.removeImgLayer();
        }
      }
    });
    Bus.$on("closeRoadAndRoadName", (payload) => {
      this.closeRoadAsync();
      this.closeRoadName();
    });
    Bus.$on("openRoadAndRoadName", (payload) => {
      this.openRoadName();
      this.createRoadAsync();
    });
    Bus.$on("openRoadName", (payload) => {
      this.openRoadName();
    });
    Bus.$on("openRoad", (payload) => {
      this.createRoadAsync();
    });
    Bus.$on("removeVehicle", (payload) => {
      this.removeVehicle();
    });
    Bus.$on("createVehicle", (payload) => {
      this.createVehicle(payload);
    });

    Bus.$on("removePerson", (payload) => {
      this.removePerson();
    });
    Bus.$on("removeMonitor", (payload) => {
      this.removeMonitor();
    });
    Bus.$on("inspectionRoad", (payload) => {
      this.getInspectionRoad(payload[0].id);
    });
    Bus.$on("RemoveInspectionRoad", (payload) => {
      this.removeInspectionRoad();
    });
    Bus.$on("closeVehicleFunction", (payload) => {
      this.removeInspectionRoad();
      this.resetMap();
    });
    Bus.$on("resetMap", (payload) => {
      this.resetMap();
    });
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.creatMap();
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" src="./Amap.less"></style>
<style lang="scss" scoped>
#amapContainer {
  width: 100%;
  height: calc(100vh - 3.49vw);
  background-color: transparent !important;
  overflow: hidden;
}
/deep/.amapDialog {
  position: absolute;
  top: 25%;
  left: 41.41vw;
}
.monitorDialog {
  position: absolute;
  top: 8.2vw;
  left: 35vw;
  right: 30vw;
  width: 30vw;
}
.VR {
  position: absolute;
  top: 15vw;
  left: 45vw;
  right: 30vw;
  width: 11vw;
}
</style>
